<template>
  <div>
    <div class="spare-money-bg">
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <p>余额（元）</p>
        </div>
        <div class="weui-cell__ft">
          <i class="icon icon-help"></i>
        </div>
      </div>
      <div class="weui-cell spare-money">
        {{(balance?balance:0) | toDecimal}}
      </div>
    </div>
    <a class="weui-cell weui-cell_access" href="javascript:;" @click.prevent="cashDepositBtn">
      <div class="weui-cell__bd">
        <p>充值</p>
      </div>
      <div class="weui-cell__ft">
      </div>
    </a>
    <a class="weui-cell weui-cell_access" href="javascript:;">
      <div class="weui-cell__bd">
        <p>提现</p>
      </div>
      <div class="weui-cell__ft">
      </div>
    </a>
    <div class="splitBlock"></div>

    <div class="weui-cells__title">余额明细</div>
    <ul class="detail-list">
      <li>
        <div>
          <span>提现手续费</span>
          <span>-3.00</span>
        </div>
        <div>
          <span>2018-04-30 18:18:20</span>
          <span>余额：300.00</span>
        </div>
      </li>
      <li>
        <div>
          <span>提现手续费</span>
          <span>-3.00</span>
        </div>
        <div>
          <span>2018-04-30 18:18:20</span>
          <span>余额：300.00</span>
        </div>
      </li>
    </ul>

    <!--出价框-->
    <div class="pay-box" :class="{actionsheetToggle:isShowPayBox}">
      <div class="weui-mask_transparent actionsheet__mask" id="mask"></div>
      <!--保证金-->
      <div class="weui-actionsheet" v-show="isCashDeposit">
        <div class="weui-actionsheet__menu">
          <div class="weui-cell pay-title">
            <div class="weui-cell__bd">
              <p>充值余额</p>
              <span class="weui-icon-cancel" @click="closePayBox"></span>
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">充值金额</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入充值金额" v-model="payBalanceNum"/>
            </div>
          </div>
          <a class="weui-cell weui-cell_access" href="javascript:;" @click="showPayOption">
            <div class="weui-cell__bd">
              <p>支付方式</p>
            </div>
            <div class="weui-cell__ft">{{ePayChannel.name}}</div>
          </a>
          <div class="weui-cell pay-warn">
            <div class="weui-cell__bd">
              <span class="weui-icon-warn"></span><p>余额可用于支付购买的拍品</p>
            </div>
          </div>
        </div>
        <div class="weui-actionsheet__action pay-btn-box">
          <div class="weui-actionsheet__cell" @click="payCashDeposit">立即支付</div>
        </div>
      </div>

      <!--支付方式-->
      <div class="weui-actionsheet pay-option" v-show="!isCashDeposit">
        <div class="weui-actionsheet__menu">
          <div class="weui-cells_radio">
            <div class="weui-cell pay-title">
              <div class="weui-cell__bd">
                <p>请选择支付方式</p>
              </div>
            </div>
            <label class="weui-cell weui-check__label" v-for="(v,k) in ePayChannelList" :key="k" :for="v.val" @click="selectPayChannel(v)">
              <div class="weui-cell__bd">
                <p>{{v.name}}</p>
              </div>
              <div class="weui-cell__ft">
                <input type="radio" class="weui-check" name="radio1" :id="v.val" :checked="ePayChannel.val == v.val">
                <span class="weui-icon-checked"></span>
              </div>
            </label>
          </div>
        </div>
        <div class="weui-actionsheet__action">
          <div class="weui-actionsheet__cell" @click="closePayOption">确定</div>
        </div>
      </div>

    </div>

  </div>
</template>

<script>
  import {setStore,getStore,getStatusMapByKey} from '../../../assets/js/tools';
  import {getAccount,saveRechargeOrder} from '../../../assets/js/getData';
  export default {
    name: "spareMoney",
    data(){
      return{
        accountInfo:null,

        balance:null,//余额
        isShowPayBox:false,//充值框
        isCashDeposit:true,//

        payBalanceNum:'',

        ePayChannelList:[],//支付方式
        ePayChannel:{},//当前支付方式


      }
    },
    created(){
      let accountInfo = getStore('accountInfo');
      if(accountInfo){
        this.accountInfo = JSON.parse(accountInfo);
        this.balance = this.accountInfo.balance;
      }

      this.ePayChannelList = getStatusMapByKey('ePayChannel');//支付方式列表
      delete this.ePayChannelList.cashDeposit;
      delete this.ePayChannelList.balance;
      this.ePayChannel = getStatusMapByKey('ePayChannel')['wxPay'];//默认当前支付方式
    },
    methods:{
      //点击支付
      async payCashDeposit(){
        if(!isNaN(this.payBalanceNum)&&this.payBalanceNum>0){
          this.isShowPayBox = false;
          let txOrderType = getStatusMapByKey('eOrderType')['balanceRecharge'].val;//余额

          let res = await saveRechargeOrder(txOrderType,this.payBalanceNum,this.ePayChannel.val);
          if(res.data.reqResult.code>0){
            //获取用户账户信息
            this.getAccount();
          }else {
            MessageBox('提示', res.data.reqResult.msg);
          }
        }else {
          Toast('充值金额不能小于0');
        }

      },
      //获取用户账户信息
      async getAccount(){
        let res = await getAccount();
        if(res.data.reqResult.code>0){
          this.accountInfo = res.data.data;
          this.balance = this.accountInfo.balance;
          setStore('accountInfo',this.accountInfo);
          this.payBalanceNum = '';
        }else {
          Toast(res.data.reqResult.msg);
        }
      },
      //关闭出价框
      closePayBox(){
        this.isShowPayBox = false;
      },
      //点击充值
      cashDepositBtn(){
        this.isShowPayBox=true;
      },
      //显示支付方式
      showPayOption(){
        this.isCashDeposit = false;
      },
      //选择支付方式
      selectPayChannel(v){
        this.ePayChannel = v;
      },
      //关闭选择支付方式
      closePayOption(){
        this.isCashDeposit = true;
      },
    }
  }
</script>

<style scoped>
  .icon-help{
    font-size: 0.75rem;
    color: #ffffff;
  }
  .spare-money-bg{
    background-color: #C50000;
  }
  .spare-money-bg p{
    color: #ffffff;
  }
  .spare-money{
    font-size: 1.25rem;
    color: #ffffff;
    padding-top: 0;
  }
  .spare-money:before{
    border-top: none;
  }
  /*余额明细列表*/
  .detail-list{
    border-top: 1px solid #CCCCCC;
  }
  .detail-list li{
    border-bottom: 1px solid #CCCCCC;
    padding: 0.5rem 0.5rem;
  }
  .detail-list div{
    display: flex;
    justify-content: space-between;
    font-size: 0.6rem;
    line-height: 1rem;
  }
  .detail-list div:first-child{
    padding: 0rem 0.5rem;
  }
  .detail-list div:last-child{
    color: #999999;
  }
  /*竞拍记录、评论、出价模态框*/
  .weui-actionsheet{
    max-height: 70%;
    overflow: auto;
  }
  .weui-mask_transparent{
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    display: none;
  }
  .actionsheetToggle .weui-mask_transparent{
    opacity: 1;
    display: block;
  }
  .actionsheetToggle .weui-actionsheet {
    transform: translate(0, 0);
  }
  /*保证金*/
  .pay-title{
    text-align: center;
    padding: 1rem 0.75rem;
    font-size: 0.8rem;
  }
  .pay-title p{
    font-size: 0.8rem;
  }
  .pay-title .weui-icon-cancel{
    position: absolute;
    top: 0;
    right: 0;
  }
  .pay-warn{
    padding: 20px 15px 30px 15px;
  }
  .pay-warn .weui-cell__bd{
    display: flex;
    padding: 0 1.25rem;
  }
  .pay-warn p{
    font-size: 12px;
    color: #999999;
  }
  .pay-warn .weui-icon-warn{
    font-size: 0.75rem;
  }
  .pay-btn-box{
    margin-top: 0;
  }
  .pay-btn-box .weui-actionsheet__cell{
    background: url("../../../../static/images/lotDetail/pay-1.png") no-repeat;
    padding: 0;
    height: 2.5rem;
    line-height: 2.5rem;
    font-size: 0.7rem;
    color: #ffffff;
  }
</style>
